<template>
	<el-container style="padding: 20px">
		<el-header>
			<el-form>
				<el-form-item label="基金名称：">
					<el-select :disabled="searchLoading" v-model="fundSysCode" clearable @change="searchClick" filterable size="medium">
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option
							v-for="(item, index) in fundList"
							:key="index + item.fundSysCode"
							:label="item.fundCode + '-' + item.fundFullName"
							:value="item.fundSysCode"
						>
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="负责人：">
					<el-select :disabled="searchLoading" v-model="personLiable" @change="searchClick" filterable clearable size="medium">
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option
							v-for="(item, index) in managerList"
							:key="index + 'a'"
							:label="item.personLiableName"
							:value="item.personLiableId"
						/>
					</el-select>
				</el-form-item>
				<el-form-item label="变更类型：">
					<el-select :disabled="searchLoading" v-model="changeType" @change="searchClick" filterable clearable size="medium">
						<el-option key="" label="--全部--" value=""> </el-option>
						<el-option v-for="(item, index) in changeTypeList" :key="index + 'c'" :label="item.changeTypeName" :value="item.changeType">
						</el-option>
					</el-select>
				</el-form-item>
			</el-form>
		</el-header>
		<el-main>
			<el-table
				:data="tableData"
				border
				style="width: 100%"
				:header-cell-style="{ background: '#FAFAFA' }"
				v-loading="searchLoading"
				element-loading-text="正在加载数据，请耐心等待......"
				element-loading-spinner="el-icon-loading"
				element-loading-background="rgba(0, 0, 0, 0.8)"
			>
				<el-table-column prop="fundCode" label="基金代码" width="120" sortable> </el-table-column>
				<el-table-column prop="fundName" label="基金简称" width="300" sortable>
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="fundName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="changeDate" label="变更日期" width="126" sortable>
					<template slot-scope="scope">
						<span v-if="!!scope.row.changeDate">
							{{ scope.row.changeDate | timerConversionStr }}
						</span>
					</template>
				</el-table-column>
				<el-table-column prop="changeText" label="变更内容" width="500">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="changeText" :index="scope.$index" :width="400" />
					</template>
				</el-table-column>
				<el-table-column prop="personLiableName" label="负责人" width="120">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="personLiableName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="checkLiableName" label="复核人" width="100">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="checkLiableName" :index="scope.$index" />
					</template>
				</el-table-column>
				<el-table-column prop="changeRemark" label="变更备注">
					<template slot-scope="scope">
						<hintCom :item="scope.row" property="changeRemark" :index="scope.$index" />
					</template>
				</el-table-column>
			</el-table>
			<el-pagination
				background
				:disabled="searchLoading"
				:page-size="paging.size"
				@current-change="handleCurrentChange"
				@size-change="handleSizeChange"
				:current-page="paging.num"
				:page-sizes="paging.sizes"
				layout="sizes,prev,pager,next,jumper,total"
				:total="paging.total"
			/>
		</el-main>
	</el-container>
</template>
<script>
	import { getRecordChangeList, fundAll } from '@/api/productApi/infoMain'
	import { getFundList } from '@/api/productApi/mechanism'
	import { debounce } from '@/utils/debounceFunc'
	export default {
		name: 'SpecialHistory',
		components: {},
		data() {
			return {
				addComShow: false,
				fundSysCode: '',
				personLiable: '',
				changeType: '',
				tableData: [],
				fundList: [],
				managerList: [],
				changeTypeList: [
					{
						changeType: '1',
						changeTypeName: '新增'
					},
					{
						changeType: '2',
						changeTypeName: '变更'
					},
					{
						changeType: '3',
						changeTypeName: '终止'
					},
					{
						changeType: '4',
						changeTypeName: '清盘'
					}
				],
				paging: {
					// 显示的条目数
					size: 10,
					// 当前页数
					num: 1,
					total: 0,
					pages: 0,
					sizes: [10, 20, 50, 100]
				},
				searchLoading: false
			}
		},
		mounted() {
			this.personLiable = this.$store.getters.name
			this.getRecordChangeList()
			this.getFundList()
			this.getUserOpList()
		},
		methods: {
			comIsShow() {
				this.addComShow = !this.addComShow
			},
			// 待办:改变页数
			handleCurrentChange(val) {
				this.paging.num = val
				this.getRecordChangeList()
			},
			// 待办:改变条数
			handleSizeChange(val) {
				this.paging.num = 1
				this.paging.size = val
				this.getRecordChangeList()
			},
			// 搜索
			searchClick: function() {
				this.paging.num = 1
				this.getRecordChangeList()
			},
			// 基金列表（下拉框）
			getFundList() {
				getFundList({ fundRaiseType: '2' }).then(res => {
					if (res.msgCode === 'Y') {
						res.data.body.forEach(item => {
							if (item.baseInfo) {
								item.fundFullName = item.baseInfo.fundFullName
								item.fundName = item.baseInfo.fundName
							}
						})
						this.fundList = res.data.body
					} else {
						this.$message({ message: res.msgDesc, type: 'error' })
					}
				})
			},
			getRecordChangeList: debounce(function() {
				const params = {}
				params.fundSysCode = this.fundSysCode
				// 1 公募   2专户
				params.fundRaiseType = '2'
				params.checkStatus = '1'
				params.personLiable = this.personLiable
				params.changeType = this.changeType
				this.searchLoading = true
				getRecordChangeList(params, this.paging)
					.then(res => {
						if (res.msgCode === 'Y') {
							this.paging.total = res.data.body.total
							if (res.data.body.list) {
								res.data.body.list.forEach(item => {
									if (item.baseInfo.length) {
										item.fundName = item.baseInfo[0].fundName
										item.fundCode = item.baseInfo[0].fundCode
									}
								})
								this.tableData = res.data.body.list
							}
						} else {
							this.$message({ message: res.msgDesc, type: 'error' })
						}
					})
					.finally(() => {
						this.searchLoading = false
					})
			}, 100),
			// 查询：产品经理权限的责任人列表
			getUserOpList() {
				fundAll({ fundRaiseTypes: ['2'] }).then(res => {
					if (res.msgCode === 'Y') {
						this.managerList = res.data.body
					}
				})
			}
		}
	}
</script>
<style lang="scss" scoped src='./index.scss'>
</style>
